<template>
  <div class="boa">
    <Head
      title="商企库"
      style="border-bottom: 2px solid #dad9df"
      id="backstyle"
    >
    </Head>
    <!-- 版心区域 -->
    <div class="area-center">
      <!-- 商企库区域 -->
      <div class="top">
        <!-- 文字区域 -->
        <div class="wen"></div>
        <!-- 用户单位文字区域 -->
        <div class="umit title-center">
          <div
            class="xiao m-t-07"
            v-for="(item, index) in title"
            :key="index"
            @click="shangqiku(item.commercetypeId)"
          >
            <div class="left">
              <div
                class="yuan"
                :class="[
                  'zhong',
                  item.commercetypeId == ID ? 'backactive' : '',
                ]"
              ></div>
            </div>
            <div
              class="zhong"
              :class="['zhong', item.commercetypeId == ID ? 'active' : '']"
            >
              {{ item.commercetypeName }}
            </div>
          </div>
        </div>
        <div class="shanghui m-t-0" v-if="isCity">
          <h4 class="bold-size">请选择</h4>
          <!-- 1.定位的省份 -->
          <div
            class="text_top title-center m-t-0"
            @click="positioning(LocationPCity, ID, citysub)"
          >
            <div class="icon">
              <img src="../../../assets/black_star.png" alt="" />
            </div>
            <div class="text">
              {{ LocationPCity }}
            </div>
          </div>
          <!-- 2.全国各省和海外 -->
          <div
            class="text_top title-center m-t-0"
            v-for="(item, index) in businesstext"
            :key="index"
            @click="nationwideshangqi(item.text, Headtitle, ID)"
          >
            <div class="icon">
              <img src="../../../assets/black_star.png" alt="" />
            </div>
            <div class="text ">
              {{ item.text }}
            </div>
          </div>
          <!-- 3.请求回来的全国连锁 -->
          <div
            class="text_top title-center m-t-0"
            v-for="(item, index) in nationalchain"
            :key="'text_top' + index"
            @click="nation(item)"
          >
            <div class="icon">
              <img src="../../../assets/black_star.png" alt="" />
            </div>
            <div class="text ">
              {{ item.commercetypeName }}
            </div>
          </div>
        </div>

        
        <div class="umitwo" v-else>
          <div class="context richText m-t-20 " v-html="list"></div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Head from "@/components/public/HeadPage.vue";
import { discusslist, findById, selectTCommerceType } from "@/api/index";
export default {
  data() {
    return {
      Headtitle: "商企库",
      title: "",
      text: "",
      list: [], //获取全国各省的
      cityList: [],
      ID: this.$route.query.id,
      isCity: false, //  是否是显示各省资源名单
      LocationPCity: sessionStorage.getItem("province") + "各商企通讯名单",
      citysub: sessionStorage.getItem("provincesub"), //截取的省份
      businesstext: [
      
        { text: "海外商企通讯名单" },
      ],
      nationalchain: "", //全国连锁
    };
  },
  components: {
    Head,
  },
  mounted() {
    //获取商企库的列表
    discusslist({
      commercetypeIdenti: "one",
    }).then((res) => {
      if (res.data.code == 200) {
        this.title = res.data.data;
      }
    });
    // 各省企业资源名单
    if (this.$route.query.id == "abef05ad-4692-4551-b0a0-f2f74d87aea0") {
      this.isCity = true;
    } else if (this.$route.query.id == "94fcf21d-e944-4a2d-9ad7-be934ac8aa91") {
      this.initData();
      this.getCity();
      // this.isCity = true;
    }
  },
  methods: {
    //获取全国各省的
    initData() {
      findById({
        otherId: this.ID,
      }).then((res) => {
        if (res.data.code == 200) {
          this.text = res.data.data.title;
          this.list = this.dataHTML(res.data.data.context);
        }
      });
    },
    getCity() {
      //获取全国连锁
      selectTCommerceType({
        commercetypeIdenti: "all",
      }).then((res) => {
        if (res.data.code == 200) {
          this.nationalchain = res.data.data;
        }
      });
    },
    shangqiku(id) {
      //判断各省企业资源名单
      if (id == "abef05ad-4692-4551-b0a0-f2f74d87aea0") {
        this.list = "";
        this.isCity = true;
        this.ID = id;
        this.getCity();
      }
      //判断全国各行业资源库
      else if (id == "94fcf21d-e944-4a2d-9ad7-be934ac8aa91") {
        this.ID = id;
        this.isCity = false;
        this.initData();
      } else {
        this.isCity = true;
        this.ID = id;
        this.getCity();
      }
    },
    //跳转定位的省份
    positioning(title, id, citysub) {
      this.$router.push({
        path: "/shangsix",
        query: {
          title,
          id,
          citysub,
        },
      });
    },
    //全国各省和海外
    nationwideshangqi(title, Headtitle, id) {
      if (title == "全国各省商企") {
        this.$router.push({
          path: "/largenation",
          query: {
            title,
            Headtitle,
            id,
          },
        });
      } else {
        this.$router.push({
          path: "/shangsix",
          query: {
            title,
            citysub: title.slice(0, 2),
            Headtitle,
            id,
          },
        });
      }
    },
    //全国连锁
    nation(item) {
      this.$router.push({
        path: "/shangsix",
        query: {
          id: item.commercetypeId,
          title: item.commercetypeName,
        },
      });
    },
  },
};
</script>
  
  <style scoped>
.boa {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
[v-cloak] {
  display: none;
}

/* 版心区域 */
.center {
  width: 98%;
}
/* 大项目总区域 */
.top {
  width: 100%;
}
/* 图标区域 */
.top h3 img {
  width: 0.24rem;
  margin-right: 0.05rem;
}
.wen {
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
}
.xian {
  width: 98%;
  height: 100%;
  display: flex;
}

/* 用人单位区域 */
.umit {
  width: 100%;
  min-height: 0.4rem;
  border-bottom: 2px solid #dad9df;
}
.xiao {
  width: 100%;
  display: flex;
}
/* 左边区域 */
.xiao .left {
  width: 5%;
  height: 0.3rem;
  margin-right: 0.07rem;
}
.yuan {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  background-color: black;
  margin-top: 0.06rem;
}
/* 中间区域 */
.zhong {
  line-height: 0.32rem;
}
/* 文字区域 */


.shanghui {
  width: 100%;

}
.shanghui h3 {
  text-align: center;
  height: 0.4rem;
  line-height: 0.4rem;
}
.shanghui h4 {
  width: 90%;
  margin: .2rem 0 .1rem 0;
}

.text_top {
  width: 100%;
  display: flex;
}
.text_top .icon {
  width: 9%;
}
.icon img {
  padding: 0.06rem 0 0 0.06rem;
  height: 0.18rem;
}

.text_top .text {
  width: 90%;
  line-height: 0.33rem;
}
</style>